<template>
  <div class="list-todos">
    <a class="list-todo activeListClass list" v-for="(list,index) in lists" :key="index" @click="goList(list.id)"
      :class="{'active': list.id == todoId}"><!--单个菜单容器-->
      <span class="icon-lock" v-if="list.locked"></span><!--锁的图标-->
      <span class="count-list" v-if="list.count > 0">{{list.count}}</span><!--数字-->
      {{list.title}}
    </a>
    <a class="link-list-new" @click="addTodoList()">
      <span class="icon-plus">+</span>
      新增
    </a>
  </div>
</template>

<script>
// import { getTodoList, addTodo } from '../api/api' // 引入封装好的两个接口
export default {
  data () {
    return {
      lists: [{
        id: 111, title: '星期一', count: 1, locked: true
      }, {
        id: 112, title: '星期二', count: 2, locked: false
      }, {
        id: 113, title: '星期三', count: 3, locked: true
      }],
      todoId: ''
    }
  },
  // created 一般是实例创建完成，但是dom还没有开始渲染时候执行
  created () {
    // 调用请求菜单列表数据的接口
    // getTodoList({}).then(res => {
    //   const todos = res.data.todos
    //   this.lists = todos
    //   this.todoId = todos[0].id
    // })
  },
  // 在 `methods` 对象中定义方法
  methods: {
    // 点击菜单，替换选中id
    goList (id) {
      console.log(id)
      this.todoId = id
    },
    // 点击新增按钮
    addTodoList () {
      console.log('addTodoList')
      // addTodo({}).then(data => {
      //   getTodoList({}).then(res => {
      //     const todos = res.data.todos
      //     this.todoId = todos[todos.length - 1].id
      //     this.lists = todos
      //   })
      // })
    }
  }
}
</script>

<style lang="scss">
@import '../common/style/menu.scss';
</style>
